<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/8/16
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="main1" style="width: 100%;height: 500px"></div>
<script>
    $.get('js/540000_full.json', function (xZjson) {
        console.log(xZjson)
        echarts.registerMap('西藏自治区', xZjson);
        var chart = echarts.init(document.getElementById('main1'));
        window.onresize = chart.resize;
        let option = {
            title: {
                x: 'center'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            visualMap: { // 视觉映射组件
                show: true,
                inverse: false, // 反转
                top: '70%',
                bottom: '2%',
                left: '2%',
                textStyle: {
                    fontsize: 14
                },
                splitList: [ // 自定义范围
                    {end: 6},
                    {start: 6, end: 20},
                    {start: 21, end: 100},
                    {start: 101, end: 300},
                    {start: 301, end: 1000},
                    {start: 1000}
                ],
                color: ['#09284d', '#074990', '#005ec3', '#317cc3', '#50b7f2', '#78d6fe'] //自定义范围的颜色
            },
            series: [
                {
                    type: 'map',
                    map: '西藏自治区',
                    zoom: 1.2,
                    top: '10%',
                    x: 'center',
                    label: {
                        show: true // 显示
                    },
                    itemStyle: {
                        normal: { // 静态的时候显示的默认样式
                            areaColor: '#F3D7D9', // 地图颜色
                            borderColor: '#886364' // 边框颜色
                        },
                        emphasis: { // 鼠标移入动态的时候显示的默认样式
                            borderWidth: 2, // 边框宽度
                            areaColor: '#ffffff' // 地图颜色
                        }
                    },
                    data: [
                        {name: '阿里地区', value: 700},
                        {name: '那曲市', value: 10000},
                        {name: '日喀则市', value: 500},
                        {name: '拉萨市', value: 20},
                        {name: '山南市', value: 300},
                        {name: '林芝市', value: 100},
                        {name: '昌都市', value: 4}
                    ]
                }
            ],

        };
        chart.setOption(option);
    });
</script>
